<template>
  <view class="homecontainer">
    <!-- 轮播图区域开始 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
      class="swiperbox">
      <!-- 渲染轮播图的item项开始 -->
      <!--  <swiper-item v-for="(item,i)in swiperList" :key="i"> 这里in要空格-->
      <swiper-item v-for="(item, i) in swiperList" :key="i">
        <view class="swiper-item">
          <!-- 动态绑定轮播图开始 -->
          <!-- {{item.images}} -->
          <image :src="item.images" mode=""></image>
          <!-- 动态绑定轮播图结束 -->
        </view>
      </swiper-item>
      <!-- 渲染轮播图的item项结束 -->
    </swiper>
    <!-- 轮播图区域结束-->

    <!-- 主体内容区域开始 -->
    <view class="contentbox">
      <!-- 主体区域 -->
      <!-- 六宫格家政业务区域开始 -->
      <view class="sixbox">
        <view class="ul">
          <view class="li" v-for="(item,i) in  SixList" :key="i"  @click="gotosixinfo(item.id)">
            {{item.name}}
          </view>
        </view>
      </view>

      <!-- 六宫家政业务格区域结束 -->

      <!-- 八宫格区域业务分类开始 -->
      <view class="eightbox">
        <view class="ul">
          <view class="li" v-for="(item,i) in EightList" :key="i">
            <view class="box">
              <view class="img"> 
             <image :src="item.images" mode=""></image>
              </view>
              <view class="text">
                {{item.name}}
              </view>
            </view> 
          </view>
        </view>
      </view>
      <!-- 八宫格区域业务分类结束 -->
      
      <!-- 认证公司区域开始 -->
      <view class="companybox">
        <!-- 公司标题开始-->
        <view class="title">
          <view class="iconbox"> 
           <uni-icons custom-prefix="iconfont" type="company" size="20"></uni-icons>
          </view>
          <view class="title-text">
            湖南征信认证家服公司 
          </view> 
        </view>
         <!-- 公司标题结束-->
        <!-- 公司信息部分开始 --> 
       <view class="info-container" v-for="(item,i) in CompanyList " :key="i"
       @click="gotocompanyinfo(item.id)">
        <my-company-item :item="item"></my-company-item>
        
       </view>

        <!-- 公司信息部分结束 -->
      </view>
      <!-- 认证公司区域结束 -->
      
      <!-- 诚信注册家服务开始 -->
      <view class="companybox">
        <!-- 诚信注册家标题开始-->
        <view class="title">
          <view class="iconbox"> 
            <uni-icons custom-prefix="iconfont" type="company" size="20"></uni-icons>
          </view>
          <view class="title-text">
           诚信注册家服员
          </view> 
        </view>
         <!-- 诚信注册家标题结束-->
        <!-- 诚信注册家信息部分开始 --> 
        <!-- @click="gotowomaninfo(item.id)" -->
       <view class="info-container" v-for="(item,i) in WaiterList " :key="i" @click="gotowomaninfo(item.id)" >
        <my-company-item :item="item"></my-company-item>
       </view>
      
        <!-- 诚信注册家信息部分结束 -->
      </view>
      
      <!-- 诚信注册家服务结束 -->

    </view>
    <!-- 主体内容区域结束-->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 轮播图的数据列表，默认为空数组
        swiperList: [],
        // 六宫格家政业务区域
        SixList: [],
        // 八宫格业务分类区域
        EightList: [],
        // 认证公司区域
        CompanyList:[],
        // 认证公司区域
        WaiterList:[],
        // 六宫格跳转路径
        arr:[
          {id:11,url:'/subpkg/shangyebu/shangyebu?query='},
          {id:22,url:'/subpkg/jiazhengqiuzhi/jiazhengqiuzhi?query='},
          {id:33,url:'/subpkg/jiatingfuwu/jiatingfuwu?query='},
          {id:44,url:'/subpkg/xianshangpeixun/xianshangpeixun?query='},
          {id:55,url:'/subpkg/jiazhengbaoxian/jiazhengbaoxian?query='},
          {id:66,url:'/subpkg/hetong/hetong?query='},
        ]
       // =======
       // >>>>>>> jiazheng_frim

      };
    },
    onLoad() {
      this.getSwiperList()
      this.getSixList()
      this.getEight()
      this.getCompany()
      this.getWaiter()
    },
    methods: {
      // 获取轮播图数据的方法
      async getSwiperList() {
        // 发起请求
        const {
          data: res
        } = await uni.$http.get('/mock/634a093fba6bdb4f54a8652d/domesticplatform/swiper')
        console.log("首页获取轮播图数据", res)
        // if (res.meta.status !== 200) {
        //        return uni.showToast({
        //          title: '数据请求失败！',
        //          duration: 1500,
        //          icon: 'none',
        //        })
        //      }
        // 请求成功，为 data 中的数据赋值
        this.swiperList = res.data.message
        console.log("首页储存轮播图数据", this.swiperList)
      },

      // 六宫格家政业务区域开始
      async getSixList() {
        // 发起请求
        const {
          data: res
        } = await uni.$http.get('/mock/634a093fba6bdb4f54a8652d/domesticplatform/home/catitems')
        console.log("六宫格家政业务数据", res)
        this.SixList = res.data.message
        console.log("六宫格家政业务存数据", this.SixList)

      },
      // 八宫格业务分类区域
      async getEight() {
        // 发起请求
        const {
          data: res
        } = await uni.$http.get('/mock/634a093fba6bdb4f54a8652d/domesticplatform/home/classification')
        console.log("八宫格业务分类区域数据", res)
        this.EightList = res.data.message
        console.log("八宫格业务分类区域存数据", this.EightList)
      },
      // 认证公司区域
      async getCompany(){
         // 发起请求
         const {data:res}=await uni.$http.get('/mock/634a093fba6bdb4f54a8652d/domesticplatform/home/company')
         console.log("认证公司区域数据", res)
         // JSON.parse(res.data.message)
         this.CompanyList = res.data.message
         // let arr=[]
         this.CompanyList.forEach((item)=>{
          item.label =item.label.replace('[','').replace(']','').split(',')
          // this.CompanyList.push(arr)      
         })
        console.log("认证公司区域存数据", this.CompanyList)
      },
      // 诚信注册家服务
      async getWaiter(){
      const {data:res}=await uni.$http.get('/mock/634a093fba6bdb4f54a8652d/domesticplatform/home/waiter')
      console.log("诚信注册家服务区域数据", res)
      this.WaiterList=res.data.message
      this.WaiterList.forEach((item)=>{
        item.label=item.label.replace('[','').replace(']','').split(',')
        item.brief_introduction=item.brief_introduction.replace('[','').replace(']','').split(',')
      })
      console.log("诚信注册家服务区存数据", this.WaiterList)
      
      
        
      },
      // 点击跳转月嫂详情页
      gotowomaninfo(item){
        console.log('点击跳转月嫂详情页')
        uni.navigateTo({
          url:'/subpkg/womaninfo/womaninfo?query='+ item
        })
      },
      // 点击跳转公司详情页
      gotocompanyinfo(item){
        console.log('点击跳转公司详情页');
        uni.navigateTo({
          url:'/subpkg/companyinfo/companyinfo?query='+ item
          
        })
      },
      //点击六宫格区域跳转页面
      gotosixinfo(sixId){
         console.log('点击跳转六宫格详情',sixId);
         let searchurls=this.arr.filter(item=>item.id===sixId)
         console.log("六宫格筛选路由",searchurls);
         uni.navigateTo({
           url:searchurls[0].url+searchurls[0].id,
           
         })
         console.log("六宫格跳转路径",searchurls[0].url+searchurls[0].id);
      }
      
      
    }
  }
</script>

<style lang="scss">
  // 首页类名
  .homecontainer {
    background-color: #fff;

    // 轮播图区域
    .swiperbox {
      width: 684rpx;
      height: 282rpx;
      padding: 40rpx;
      background-color: rgba(63, 81, 181, 1);
      image{
        width: 684rpx;
        height: 282rpx;
      }
    }

    // 主体内容区域
    .contentbox {
      padding: 40rpx;
    // 六宫格家政业务区域
      .sixbox {
        margin-bottom: 30rpx;
        .ul {
          // background-color: aqua;
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          height: 400rpx;

          .li {
            border-radius: 0.5em;
            background-color: rgba(238, 236, 236, 1);
            font-size: 30rpx;
            width: 30%;
            height: 180rpx;
            line-height: 180rpx;
            text-align: center;
            margin-right: 5%;
            margin-bottom: 5%;

            &:nth-of-type(3n) {
              margin-right: 0;
            }

            &:nth-of-type(n+4) {
              margin-bottom: 0;
            }
          }
        }
      }
      // 八宫格区域业务分类
      .eightbox{
         margin-bottom: 30rpx;
        .ul{ 
        width: 100%;
        height: 400rpx;
        display: grid;
        // grid-template-columns: 25% 25% 25% 25%;
        grid-template-columns:repeat(4,1fr); 
        // grid-template-rows: 200rpx 200rpx; 
        grid-template-rows: repeat(2,1fr);
        .li{
          // background-color: pink; 
          .box{
            width: 100%;
            height: 100%;
            // background-color: lawngreen;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction:column;
            .img{
              width: 110rpx;
              height: 110rpx;
              border-radius: 50%;
              background-color: gold;
              image{
                width: 110rpx;
                height: 110rpx;  
              }
            }
            .text{
              font-size: 30rpx;
            }
          }
          
        }
        }
      }
      //认证公司区域
      
      .companybox{
         margin-bottom: 30rpx;
        // 公司标题部分
        .title{
          padding-bottom: 15rpx;
          border-bottom: 1px solid #f0eeee ;
          display: flex;
          align-items: center;
          .iconbox{
            width: 45rpx;
            height: 45rpx;
            // background-color: aqua;
          }
          .title-text{
            // background-color: pink;
            flex: 1;
            font-size: 35rpx;
          }
        }
        
        .info-container{
          width: 100%;
          // height: 220rpx;
          // background-color: pink;
          padding: 30rpx 0;
           border-bottom: 1px solid #f0eeee ;

        }
   
      }

    }

  }
</style>
